var canvas = document.querySelector('#canvas'),
    readout = document.querySelector('#readout'),
    context = canvas.getContext('2d'),
    spritesheet = new Image(); //new 一个图片对象 新的哈

// Functions.....................................................
/**
 * 此方法不仅能获取到相应坐标，还处理了当canvas里面的绘图视图发生缩放的时候的情况。
 * @param canvas
 * @param x
 * @param y
 * @returns {{x: number, y: number}}
 */
function windowToCanvas(canvas, x, y) {
    var bbox = canvas.getBoundingClientRect();//该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
    return {x: x - bbox.left * (canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height)};
}
/**
 * 绘制网格
 */
function drawBackground() {
    var VERTICAL_LINE_SPACING = 12, //垂直线条之间的空隙
        i = context.canvas.height;//canvas的高

    context.clearRect(0, 0, canvas.width, canvas.height); //clearRect() 方法清空给定矩形内的指定像素
    context.strokeStyle = 'lightgray';//设置或返回用于笔触的颜色、渐变或模式
    context.lineWidth = 0.5;//线宽

    while (i > VERTICAL_LINE_SPACING * 4) { //从下往上画的 看到没有
        context.beginPath(); //beginPath() 方法开始一条路径，或重置当前的路径
        context.moveTo(0, i); //把路径移动到画布中的指定点，不创建线条
        context.lineTo(context.canvas.width, i);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
        context.stroke();//绘制已定义的路径
        i -= VERTICAL_LINE_SPACING;
    }
}

/**
 * 绘制精灵 其实就是绘制图像
 */
function drawSpritesheet() {
    context.drawImage(spritesheet, 0, 0);//drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
}
/**
 * 绘制指引线
 * @param x
 * @param y
 */
function drawGuidelines(x, y) {
    context.strokeStyle = 'rgba(0,0,230,0.8)';
    context.lineWidth = 0.5;
    drawVerticalLine(x);
    drawHorizontalLine(y);
}
/**
 * 更新坐标值
 * @param x
 * @param y
 */
function updateReadout(x, y) {
    readout.innerHTML = '(' + x.toFixed(0) + ', ' + y.toFixed(0) + ')';
}

/**
 * 绘制一条水平线
 * @param y
 */
function drawHorizontalLine(y) {
    context.beginPath();
    context.moveTo(0, y + 0.5);
    context.lineTo(context.canvas.width, y + 0.5);
    context.stroke();
}
/**
 * 绘制一条垂直线
 * @param x
 */
function drawVerticalLine(x) {
    context.beginPath();
    context.moveTo(x + 0.5, 0);
    context.lineTo(x + 0.5, context.canvas.height);
    context.stroke();
}

// Event handlers.....................................................
/**
 * 监听鼠标移动
 * @param e
 */
canvas.onmousemove = function (e) {
    var loc = windowToCanvas(canvas, e.clientX, e.clientY); //获取到鼠标相对于当前canvas的坐标
    drawBackground();
    drawSpritesheet();
    drawGuidelines(loc.x, loc.y);
    updateReadout(loc.x, loc.y);
};

// Initialization.....................................................

spritesheet.src = '../../shared/images/running-sprite-sheet.png';

spritesheet.onload = function (e) {
    drawSpritesheet();
};

drawBackground();
